<template>
	<view class="content">
		<view class="bgc">
			<image src="@/static/home/share-bgc.png" mode="widthFix" class="bgc-sty"></image>
		</view>
		<view class="">
			<view class="nav_wrap  pd ">
				<view class="new-head" :style="{'margin-top':StatusBarHeight+10+'px'}">
					<image src="@/static/home/arrow-left.png" mode="aspectFill" @click="back"
						style="width: 64rpx;height: 64rpx;">
					</image>
					<view class="nav-title">
						分享商品
					</view>
					<view class="">
						<view style="width: 64rpx;height: 64rpx;">

						</view>
					</view>
				</view>
			</view>

			<view class="header">
				<view class="header_text">
					<view class="text_sty">
						<text>
							{{name}}
							【到手价】{{price}}元
							-----------------
							【下载APP】https://sj.mc.com/appdetail/com.jf.lkrj
							【邀请码】{{formDate.Invitation}}
							-----------------
							【复制口令，打卡美传APP购买】
							& {{formDate.word}} &
						</text>
					</view>
				</view>
				<view class="title-wrap">
					<image src="@/static/home/share-title.png" mode="widthFix" class="title-sty"></image>
				</view>

				<view class="title-star">
					<image src="@/static/home/star.png" mode="widthFix" class="title-sty"></image>
				</view>
			</view>

			<view class="btn-sty" @click="onCopyDetail">
				复制链接
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getStatusBarHeight,
	} from "@/utils/system.js"
	import {
		getCode
	} from "@/api/apis.js"
	import {
		mapState,
		mapMutations
	} from "vuex";
	// 
	export default {
		data() {
			return {
				StatusBarHeight: 0, //导航栏高度
				pkId: 0, // 商品id
				name: "",
				price: 0,
				formDate: {
					word: "",
					Invitation: "",
				}, //
			};
		},

		onLoad(val) {
			this.pkId = val.id
			this.name = val.name
			this.price = val.price/100
			this.StatusBarHeight = getStatusBarHeight()
			this.onSearch() //获取详情
		},

		computed: {
			...mapState("userInfo", ["Info", 'storeId']),
		},

		methods: {
			onSearch() {
				let params = {
					id: this.pkId,
					storeId: this.storeId
				}
				getCode(params).then(res => {
					console.log(res.result);
					this.formDate.word = res.result //口令
					this.formDate.Invitation = this.Info.inviteCode //邀请码
					// console.log(this.formDate);
				})
			},


			// 
			onCopyDetail() {
				let text = `
				${this.name}
				【到手价】${this.price}元
				-----------------
				【下载APP】https://sj.mc.com/appdetail/com.jf.lkrj
				【邀请码】*${this.formDate.Invitation}*
				-----------------
				【复制口令，打卡美传APP购买】
				&${this.formDate.word}&`
				uni.setClipboardData({
					data: text,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			},
			back() {
				uni.navigateBack(1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		border-top: 1px solid rgba(255, 232, 202, 1);
		height: 100vh;
		width: 100%;
		background: rgba(255, 232, 202, 1);

		.bgc {
			position: fixed;
			width: 100%;

			.bgc-sty {
				width: 100%;
			}
		}

		// 导航

		.nav_wrap {
			position: relative;
			z-index: 1;
			box-sizing: border-box;
			top: 0;
			width: 100%;
			padding: 0 24rpx;

			.new-head {
				width: 100%;
				display: flex;
				padding: 30rpx 0 38rpx 0;
				box-sizing: border-box;
				justify-content: space-between;
				align-items: center;

				.nav-title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					line-height: 48rpx;
					color: #181127;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}

				.nav_share {
					width: 44rpx;
					height: 44rpx;
					border-radius: 0px 0px 0px 0px;

					.HR_menu {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}


		.header {
			position: relative;
			margin: 0 auto;
			margin-top: 336rpx;
			z-index: 1;
			width: 702rpx;
			height: 522rpx;
			background: rgba(255, 245, 233, 1);
			border-radius: 24rpx;
			padding: 24rpx;

			.header_text {
				margin: 0 auto;
				margin-top: 82rpx;
				width: 654rpx;
				box-sizing: border-box;
				padding: 40rpx 24rpx;
				height: 400rpx;
				background: #FFEDDB;
				border-radius: 36rpx;

				.text_sty {
					font-weight: 400;
					font-size: 24rpx;
					color: #581006;
					line-height: 40rpx;
				}

				.price {
					margin-top: 26rpx;
				}
			}

			.title-wrap {
				position: absolute;
				top: -72rpx;
				left: calc(50% - 166rpx);
				height: 114rpx;
				width: 332rpx;

				.title-sty {
					width: 100%;
					color: #262626;
					line-height: 40px;
				}
			}

			.title-star {
				position: absolute;
				top: -112rpx;
				left: -8rpx;
				height: 192rpx;
				width: 192rpx;

				.title-sty {
					width: 100%;
				}
			}

			.icon_wrap {
				position: absolute;

			}
		}

		.btn-sty {
			margin: 0 auto;
			margin-top: 80rpx;
			width: 702rpx;
			height: 88rpx;
			border-radius: 44rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			background: $uni-color-theme;
			color: #FFFFFF;
			line-height: 48px;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	}
</style>